<template>
  <div>
    <!-- 菜单管理 -->
    <div class="search-btn">
      <el-button @click="getTableData()"
        style="background-color: #4CAF50; color: white;margin-left: 10px; padding: 9px 15px 9px 15px"
        class="btn">查询</el-button>
      <el-button type="primary" @click="addOrUpdateHandle()"
        style="margin-left: 10px; padding: 9px 15px 9px 15px">新增</el-button>
    </div>
    <el-table border :data="tableData" v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%" row-key="id" default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      >
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="title" header-align="center" label="菜单名称"> </el-table-column>
      <el-table-column prop="path" header-align="center" label="路径"> </el-table-column>
      <el-table-column prop="icon" header-align="center" label="图标"> </el-table-column>
      <el-table-column prop="sort" header-align="center" label="排序"> </el-table-column>
      <el-table-column fixed="right" header-align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="addOrUpdateHandle(scope.row.id)" size="mini">修改</el-button>
          <el-button type="danger" @click="onDelete(scope.row.id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :menuList="tableData"
      @refreshDataList="getTableData"></add-or-update>
  </div>
</template>

<script>
  import AddOrUpdate from './add-or-update.vue';
  import { getDataList, delDataList } from '@/api/menu';
  export default {
    name: 'UserPage',
    components: { AddOrUpdate },
    data() {
      return {
        dataForm: {},
        tableData: [],
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
      };
    },
    created() {
      this.getTableData();
    },
    methods: {
      // 获取表格数据
      getTableData() {
        getDataList()
          .then((res) => {
            if (res && res.code === 0) {
              this.tableData = res.data;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      // 编辑
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id);
        });
      },
      // 删除
      onDelete(id) {
        this.$confirm(`确定对[id=${id}]进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            delDataList(id)
              .then((res) => {
                if (res && res.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.getTableData();
                    },
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }).catch(() => { });
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val;
      },
    },
  };
</script>

<style scoped>
  .search-btn {
    margin-bottom: 10px;
  }

  .btn:hover {
    opacity: 0.6;
  }
</style>